<template>
  <div class="home_container">
    <Header @setUser="getUser" @isRead="getIsRead" ref="headerRef"></Header>
    <main>
      <div class="left">
        <div class="portrait">
          <div class="avator">
            <el-avatar :src="userinfos.imgUrl" style="width:80px;height:80px;"></el-avatar>
          </div>
          <div>{{username}}</div>
          <div class="post">
            <span>{{postinfos.length}}帖子 · {{commentCount}}回复</span>
          </div>
          <div class="ranking">
            <div>
              <div>{{userinfos.integ}}</div>
              <div>积分</div>
            </div>
            <div>
              <div>{{praiseCount}}</div>
              <div>获赞</div>
            </div>
          </div>
        </div>
        <ul>
          <li :class="{'active':item.active}" v-for="(item,index) in activeUrl" :key="index">
            <router-link tag="a" :to="item.url" :class="{'aActive':item.active}">{{item.name}}</router-link>
            <el-badge :is-dot="item.news" class="item" style="position:absolute;"></el-badge>
          </li>
        </ul>
      </div>
      <div class="right">
        <router-view
          :postinfos="postinfos"
          :username="username"
          :userinfos="userinfos"
          :postreplies="postreplies"
          :msgIsRead="msgIsRead"
          @msgToCenter="msgToCenter"
          :pariseIsRead="pariseIsRead"
          @pariseToCenter="pariseToCenter"
        ></router-view>
      </div>
    </main>
  </div>
</template>
<script>
import Header from './header.vue'
export default {
  data() {
    return {
      username: '', // 昵称
      userinfos: '', // 用户信息
      postinfos: [], // 帖子内容
      commentCount: 0, // 评论总数量
      praiseCount: 0, // 点赞总数量
      activeUrl: [
        {
          name: '我的动态',
          url: '/usercenter/dynamic',
          active: false,
          news: false
        },
        {
          name: '我的消息',
          url: '/usercenter/msg',
          active: false,
          news: false
        },
        {
          name: '我的资料',
          url: '/usercenter/means',
          active: false
        },
        {
          name: '我的关注',
          url: '/usercenter/follow',
          active: false
        },
        {
          name: '我的通知',
          url: '/usercenter/notice',
          active: false,
          news: false
        }
      ],
      postreplies: [], // 我回复的
      msgIsRead: false, // 传给消息
      pariseIsRead: false, // 传给点赞
      activeUrlNews: {
        msg: false
      }
    }
  },
  created() {
    // console.log(this.$route.path)
    this.navClass(this.$route.path)
  },
  methods: {
    getUser(data) {
      this.username = data
    },
    getIsRead(data) {
      // console.log('getIsRead:' + data)
      if (data) {
        this.activeUrl[1].news = true
        this.msgIsRead = true
      }
    },
    msgToCenter(data) {
      // 从消息拿到未读条数，改变提示
      if (!data) {
        // console.log('msgToCenter: ' + data)
        this.activeUrl[1].news = false
        this.$refs.headerRef.isRead = false
      }
    },
    pariseToCenter(data) {
      // 从点赞通知知道以进入，改变提示
      if (data) this.activeUrl[4].news = false
    },
    // 获取帖子,用于帖子的数量
    async getpostAll() {
      const res = await this.$http.post('/getpostall', {
        username: this.username
      })
      if (res.meta.status !== 200) {
        return this.$Message.error('获取所有帖子失败')
      }
      return res.data
    },
    // 导航栏触发样式变化
    navClass(val) {
      if (val === '/usercenter/msgRoom') {
        this.activeUrl[1].active = true
      } else {
        this.activeUrl.forEach(item => {
          item.active = item.url === val ? true : false
        })
      }
    },
    // 得到我评论的消息
    async getpostReplies() {
      const res = await this.$http.post('/getpostReplies/', {
        commentator: this.username
      })
      // console.log(this.username + ':' + res)
      if (res.meta.status !== 200) {
        return this.$Message.error('获取全部回复失败')
      }
      return res.data
    },
    // 获取帖子的内容
    async getappointPost(id) {
      const postRes = await this.$http.get('/getappointPost/' + id)
      if (postRes.meta.status !== 200) {
        return this.$Message.error('获取帖子信息失败')
      }
      return postRes.data
    }
  },
  mounted() {
    this.comm.getuserInfo(this.username, this).then(data => {
      data.integ = this.comm.integSum(data.integ)
      this.userinfos = data
    })
    this.getpostAll().then(data => {
      this.comm.getnotice(this.username, this).then(notices => {
        data.forEach(post => {
          post.noRead = 0
          this.commentCount += post.commentCount
          this.praiseCount += post.praisePerson.length
          notices.comment.forEach(notice => {
            if (notice.postId === post._id && notice.isread !== 1) {
              post.noRead += 1
              this.activeUrl[0].news = true
            }
          })
          notices.parise.forEach(notice => {
            if (notice.isread !== 1) {
              this.activeUrl[4].news = true
              this.pariseIsRead = true
            }
          })
          this.postinfos.push(post)
        })
      })
    })
    this.getpostReplies().then(data => {
      data.forEach(item => {
        this.getappointPost(item.postId).then(data => {
          item.postTitle = data.title
        })
        this.postreplies.push(item)
      })
    })
  },
  components: {
    Header
  },
  watch: {
    // 导航栏样式变化
    '$route.path': function(val, oval) {
      this.navClass(val)
    }
  }
}
</script>
<style lang="less" scoped>
.home_container {
  width: 100%;
  main {
    display: flex;
    margin-top: 3px;
    margin-left: 5%;
    width: 90%;
    height: 500px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .left {
      width: 20%;
      height: 100%;
      border: 1px solid #e9e9e9;
      .portrait {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 100%;
        height: 230px;
        border-bottom: 1px solid #e9e9e9;
        .avator {
          margin-top: 20px;
        }
        .post {
          font-size: 12px;
          color: #8e94ab;
          margin: 15px 0;
        }
        .ranking {
          display: flex;
          justify-content: space-between;
          width: 70%;
          height: 80px;
          margin-left: 15%;
          > div {
            width: 50px;
            height: 100%;
            div:nth-child(2) {
              margin-top: 5px;
              font-size: 13px;
              color: #8e94ab;
            }
          }
        }
      }
      ul {
        margin-top: 0;
        padding: 0;
        position: relative;
        li {
          height: 45px;
          text-align: center;
          line-height: 45px;
          border-bottom: 1px solid #e9e9e9;
          a {
            color: #999;
          }
          a:hover {
            color: #000;
            text-decoration: underline;
          }
          .aActive {
            color: #000;
          }
        }
        .active {
          border-left: 3px solid #0072eb;
        }
      }
    }
    .right {
      width: 77%;
      min-height: 94%;
      padding: 20px;
      overflow: auto;
      overflow-x: hidden;
      background-color: #fff;
    }
  }
}
</style>
